<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">桌面</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <h4>
                社区统计
            </h4>
            <div class="FourBoxes">
                <div>
                    今日注册用户
                    <span>0</span>
                </div>
                <div>
                    用户总数
                    <span>0</span>
                </div>
                <div>
                    今日发帖数
                    <span>0</span>
                </div>
                <div>
                    发帖总数
                    <span>0</span>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.box-card {
    height: 600px;
}

.FourBoxes {
    display: flex;
    margin-top: 30px;
}

.FourBoxes>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80px;
    margin: 0 10px;
    border: 1px solid #e8eaec;
}

.FourBoxes>div>span {
    margin-top: 5px;
    font-weight: 700;
    font-size: 20px;
}
.FourBoxes>div:hover {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
}
</style>